<template>
  <div>
    <h1 ref="title">App</h1>
    <Item ref="item" />
    <button @click="$refs.item.msg = 'world'">改</button>
  </div>
</template>

<script>
import Item from "./components/Item";
export default {
  name: "App",
  components:{
    Item
  }, 
  methods(){
     //我们可以在this.$refs对象上看到所有的ref的引用
    //如果ref设置给了html元素,则ref引用指向的是这个DOM的真实节点(我们尽量不直接操作DOM,除非在无法使用vue的时候,再去使用)
    console.log(this, "app");

    this.$refs.title.style.color = "pink";

    //如果ref设置给了组件,则ref引用指向的是这个组件实例(这也是组件通信的一种方式,因为我们在父组件可以拿到子组件的数据)
    console.log(this.$refs.item);
  }
}
</script>

<style scoped></style>
